<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="工作报告"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <van-cell title="日期"  v-model="date" @click="onDisplay" is-link />

    <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm" :show-confirm="false"  :min-date="minDate" :default-date="currentDate" />

    <div style="display: flex;flex-direction: column;width: 100%;margin-top: 10px;background-color: white;border-radius: 5px">
      <div style="display: flex;flex-direction: row;width: 100%;">
        <div style="font-size: 14px;padding-left:12px;padding-top:15px;font-weight: bold">当日计划{{ value ? ' (' + value + '%)' : ' (' + 0 + '%)'}}</div>
        <div style="position: absolute;right: 10px;padding-top: 15px;font-size: 14px;color: #20a0ff" @click="showJdDialog">更新进度</div>
      </div>

      <van-divider />

      <div style="padding-left: 10px;padding-bottom: 10px;" v-if="planid">
        <van-tag type="primary" size="medium">{{ typename }}</van-tag>
      </div>

      <div style="padding-left:10px;padding-right:20px;font-size: 15px;padding-bottom: 20px;">
        {{ content}}
      </div>

    </div>

    <div style="display: flex;flex-direction: column;width: 100%;margin-top: 10px;background-color: white;border-radius: 5px">
      <div style="display: flex;flex-direction: row;width: 100%;">
        <div style="font-size: 14px;padding-left:12px;padding-top:15px;font-weight: bold">当日工作内容</div>
        <div style="position: absolute;right: 10px;padding-top: 15px;font-size: 14px;color: #20a0ff" @click="showJobDialog">记一条</div>
      </div>

      <van-divider />

      <div style="padding-bottom: 150px;">
        <van-cell-group v-for="item in jobRecordList " :key="item.recordid">
          <van-cell :value="item.khsl + '家'" :label="item.content">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <van-tag type="primary">{{item.type == '1' ? '找客户': item.type == '2' ? '拜访客户':'培训客户' }}</van-tag>
            </template>
          </van-cell>

        </van-cell-group>
      </div>

    </div>

    <van-dialog v-model:show="jdShow" title="拖动进度条更新进度" show-cancel-button @confirm="onConfirmJd" @cancel="onCancelJd">
      <div style="width: 90%;padding-bottom: 40px;padding-top: 40px;padding-left: 10px;padding-right: 10px;">
        <van-slider v-model="value" active-color="#ee0a24">
          <template #button>
            <div class="custom-button">{{ value }}</div>
          </template>
        </van-slider>
      </div>

    </van-dialog>

    <van-dialog v-model:show="jobShow" title="工作内容记录" show-cancel-button @confirm="onConfirmJobrecord" @cancel="onCancelJobrecord">
      <div style="width: 90%;padding-bottom: 40px;padding-top: 40px;padding-left: 10px;padding-right: 10px;">

        <van-cell  title="选择工作类型：" required title-class="titleclass"   v-model="jobtypename" center is-link @click="showType" />
        <van-field
          v-model="khsl"
          label="客户数："
          required
          label-width="25%"
          placeholder="请输入客户数量"
          type="number"
        />

        <van-field
          v-model="jobContent"
          label=""
          placeholder="请具体描述工作内容"
          type="textarea"
          required
          label-width="30%"
        />

      </div>

    </van-dialog>

    <van-action-sheet v-model="show" :actions="actions" @select="onSelectType" />

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'

import { addCost, listJobplan, queryUserInfo, updateJobplan, addJobrecord, listJobrecord } from '../../api/api'

export default {
  name: 'Jobrecord',
  data() {
    return {

      pageNum: 1,
      pageSize: 10,
      date: '',
      show: false,
      dateshow: false,
      minDate: new Date(2021, 1, 1),
      ywyname: '',
      bz: '',
      currentDate: new Date(),
      planid: '',
      content: '',
      actions: [{ id: '1', name: '找客户' }, { id: '2', name: '拜访客户' }, { id: '3', name: '培训客户' }],
      typename: '',
      jdShow: false,
      value: 0,
      jobShow: false,
      type: '',
      jobContent: '',
      khsl: '',
      jobtypename: '请选择',
      jobtype: '',
      jobRecordList: []

    }
  },

  created() {
    this.queryUserInfo()

    var day3 = new Date()
    var s3 = day3.getFullYear() + '-' + (day3.getMonth() + 1) + '-' + day3.getDate()
    this.currentDate = day3
    this.date = s3
  },
  mounted() {

  },

  methods: {

    showJobDialog() {
      this.jobShow = true
    },

    showType() {
      this.show = true
    },

    onSelectType(item) {
      this.jobtype = item.id
      this.jobtypename = item.name
      this.show = false
    },

    onConfirmJobrecord() {
      if (!this.jobtype) {
        Toast.fail('请选择工作类型')
        return
      }

      if (!this.khsl) {
        Toast.fail('请填写客户数量')
        return
      }

      if (!this.jobContent) {
        Toast.fail('请填写具体工作内容')
        return
      }

      const param = { content: this.jobContent, khsl: this.khsl, type: this.jobtype, userid: this.userid, ywyname: this.ywyname, ssrq: this.date }

      addJobrecord(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '保存成功'
          }).then(() => {
            // on close
            this.queryJobrecord()
            this.jobShow = false
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelJobrecord() {

    },

    onConfirmJd() {
      const param = { planid: this.planid, wcjd: this.value }

      updateJobplan(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '进度更新成功'
          }).then(() => {
            // on close
            this.jdShow = false
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelJd() {
      this.jdShow = false
    },

    showJdDialog() {
      this.jdShow = true
    },

    queryJobrecord() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobrecord(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          that.jobRecordList = list
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryJobplan() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobplan(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          const actions = that.actions
          if (list && list.length > 0) {
            that.content = list[0].content
            that.type = list[0].type
            that.szdz = list[0].szdz
            that.value = list[0].wcjd
            for (var i = 0; i < actions.length; i++) {
              if (actions[i].id == list[0].type) {
                that.typename = actions[i].name
              }
            }
            that.planid = list[0].planid
          } else {
            that.content = ''
            that.type = ''
            that.szdz = ''
            that.typename = '请选择'
            that.planid = ''
            that.value = 0
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.ywyname = response.data.name
          this.userid = response.data.userid
          this.queryJobplan()
          this.queryJobrecord()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryJobrecord()
      this.queryJobplan()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`
    },

    showFblx() {
      this.show = true
    },

    showDklx() {
      if (!this.ywlx) {
        Dialog.alert({
          title: '',
          message: '先选择业务类型'
        })
        return
      }
      this.dklxshow = true
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择日期')
        return
      }

      if (!this.zje) {
        Toast.fail('请填写总金额')
        return
      }

      const costid = this.costid

      if (costid) {
        const param = { date: this.date, zje: this.zje, bz: this.bz, costid: this.costid }
        updateCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '修改成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      } else {
        const param = { date: this.date, zje: this.zje, bz: this.bz }
        addCost(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '提交成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      }
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    }

  }
}
</script>
<style lang="scss" scoped>

.container{
  width: 100%;
  height: calc(100vh);

}

.navclass{
  background-color:#20a0ff;
  color: white;
}

.btn{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  background-color: white;
  padding-bottom: 150px;
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}

</style>
